<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $(function(){/*?*/
            //1、系统管理
            $("input:first").click(function(){
                $("p:first input").each(function(){
                    if($("input:first").prop("checked")){
                        $(this).prop("checked", true);
                    }else{
                        $(this).prop("checked", false);
                    }
                });
            });

            $("p:first input").each(function(){
                $("p:first input").bind("click",function(){
                    var checkedNmu=$("p:first input:checked").length;
                    if(checkedNmu>0){
                        $("input:eq(0)").prop("checked",true);
                    }else{
                        $("input:eq(0)").prop("checked",false);
                    }
                });
            });

            //2、鲜花订单管理
            $("h2:eq(1) input").click(function(){
                $("p:eq(1) input").each(function(){
                    if($("h2:eq(1) input").prop("checked")){
                        $(this).prop("checked", true);
                    }else{
                        $(this).prop("checked", false);
                    }
                });
            });

            $("p:eq(1) input").each(function(){
                $("p:eq(1) input").bind("click",function(){
                    var checkedNum1=$("p:eq(1) input:checked").length;
                    if(checkedNum1>0){
                        $("h2:eq(1) input").prop("checked",true);
                    }else{
                        $("h2:eq(1) input").prop("checked",false);
                    }
                });
            });

            //3、客户管理
            $("h2:eq(2) input").click(function(){
                $("p:eq(2) input").each(function(){
                    if($("h2:eq(2) input").prop("checked")){
                        $(this).prop("checked", true);
                    }else{
                        $(this).prop("checked", false);
                    }
                });
            });

            $("p:eq(2) input").each(function(){
                $("p:eq(2) input").bind("click",function(){
                    var checkedNum1=$("p:eq(2) input:checked").length;
                    if(checkedNum1>0){
                        $("h2:eq(2) input").prop("checked",true);
                    }else{
                        $("h2:eq(2) input").prop("checked",false);
                    }
                });
            });

            //4、全选
            var i=0;
            $("input[type='button']").click(function(){
                i++;
                if(i%2!=0){
                    $("input[type='checkbox']").each(function(){
                        $("input[type='checkbox']").prop("checked",true);
                    });


                }else{
                    $("input[type='checkbox']").each(function(){
                        $("input[type='checkbox']").prop("checked",false);
                    });
                }
            });
        });/*?*/
    </script>


</head>
<body>
<div id="menu">
    <h2><input type="checkbox" name="role" value="101" />系统管理</h2>
    <p>
        <input type="checkbox" name="role" value="101001" />用户管理
        <input type="checkbox" name="role" value="101002" />参数管理
        <input type="checkbox" name="role" value="101003" />权限管理
        <input type="checkbox" name="role" value="101004" />日常管理
        <input type="checkbox" name="role" value="101005" />财务管理
    </p>
    <hr />
    <h2><input type="checkbox" name="role" value="102" />鲜花订单管理</h2>
    <p>
        <input type="checkbox" name="role" value="102032" />增加订单
        <input type="checkbox" name="role" value="102013" />订单发货
        <input type="checkbox" name="role" value="102015" />在线结算
        <input type="checkbox" name="role" value="102016" />原料管理
    </p>
    <hr />
    <h2><input type="checkbox" name="role" value="103" />客户管理</h2>
    <p>
        <input type="checkbox" name="role" value="103032" />增加用户
        <input type="checkbox" name="role" value="103032" />查找用户
        <input type="checkbox" name="role" value="103012" />用户维护
        <input type="checkbox" name="role" value="103012" />生日祝贺
        <input type="checkbox" name="role" value="103012" />删除用户
    </p>
</div>
<p>
    <input type="button" value="全选" />
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
</p>
<hr />
<p>
    1:实现 全选 全不选 功能（通过点击 全选 按钮）<br />
    2：选中h2中的大项，对应后面的小项 全部选中；取消选中，则小项全部取消；<br />
    3:选中小项，则其对应的大项选中，如果小项都未选中，则大项不选。<br />
    4：不能采用固定value 的方式，比如$(":checkbox[value=1001]")这样的格式
</p>
</body>
</html>